<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
	
	<!-- 
		一、透明度
		
		1、opacity：不透明度，还是占位置的，子元素也会透明
		
		0（完全透明）-1（完全不透明）
		
		（1）区别display: none; 块会消失，不占位置
		
		（2）opacity: 0; 块会消失，但是还占位置
		
	 -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }
		
		/* 原文链接：https://blog.csdn.net/qq_51478745/article/details/125700227 */
		
		.box5{
		            width: 200px;
		            height: 200px;
		            background-color: rgb(255, 0, 4);
		            transform: translate(200px,200px) rotate(45deg) scale(0.5);
					/* transform: rotate(45deg) translate(200px,200px)  scale(0.5); */
					/*
					 transform: rotate(45deg) translate(200px,200px) scale(0.5); 先旋转，再平移，最后缩小
					 
					 会出现显示不正常
					 */
					
		        }
				
				
		
		
		
		 .box4{
			background-color: rgb(255, 0, 4);
			min-width: 500px;
			max-height: 150px;
			/* transform: translate(100px,50px); */
			/* transform: translateX(100px); */
			/* transform: translateY(50px); */
			/* transform: translateZ(100px); */
			
			transform: rotate(45deg);/* 旋转54°， deg为度的角度单位 */
			transform: scale(0.5);/* 缩放：transform: scale(缩放比例), 缩放改变大小，但是位置还在 */
		}

		
		.box3{
		    width: 100px;
		    height: 200px;background-color: aqua;
		    display: flex;
		}
        .box2{
            width: 100px;
            height: 200px;
            background-color: blue;
            display: none;
        }
        .box1{
            width: 100px;
            height: 200px;
            background-color: rgb(187, 255, 0);
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: rgb(255, 0, 4);
            opacity: 0;
        }
    </style>
</head>
<body>
    <div class="box"></div><!-- 可以说明 box里的opacity: 0;透明占位 -->
    <div class="box1"></div>
    <div class="box2"></div>
	<div class="box3"></div><!-- 可以说明 box2里的display: none;是透明不占位的 -->
	<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
	<div>
		<span style="cursor: auto;">auto</span><br />
		<span style="cursor: pointer;">pointer</span><br />
		<span style="cursor: default;">default</span><br />
		<span style="cursor: crosshair;">crosshair</span><br />
		<span style="cursor: help;">help</span><br />
		<span style="cursor: wait;">wait</span><br />
		<span style="cursor: text;">text</span><br />
		<span style="cursor: move;">move</span><br />
	</div>
	<div class="box4">
		1、max-width、max-height：类似与将宽高定死
		
		2、min-width、min-height：当界面缩小到固定范围后，内容不会再跟着缩小
		
		transform属性
		
		1、平移：transform: translate(x轴, y轴); 、transform:translateX(200px); 、transform:translateY(); 
	</div>
	
	<div class="box5">2</div>

</body>
</html>